κ°λ° μν¬νλ‘μ°λ₯Ό κ°μ νκ³ μμ°μ±μ λμ΄λ©° λμ μΉ μ ν리μΌμ΄μ μ ν¨μ¨μ μΌλ‘ ꡬμΆνκΈ° μν΄ JavaScript λͺ¨λ ν« λ¦¬νλ μ΄μ€λ¨ΌνΈ(HMR)μ κ°λ ₯ν κΈ°λ₯μ μ΄ν΄λ³΄μΈμ. λ λΉ λ₯΄κ³ λ°μμ±μ΄ λ°μ΄λ μ½λ© κ²½νμ μν΄ HMRμ ꡬννκ³ νμ©νλ λ°©λ²μ μμ보μΈμ.
JavaScript λͺ¨λ ν« λ¦¬νλ μ΄μ€λ¨ΌνΈ: ν¨μ¨μ μΈ κ°λ° μν¬νλ‘μ°
μΉ κ°λ°μ λμμμ΄ μ§ννλ νκ²½μμ ν¨μ¨μ±κ³Ό μλλ λ§€μ° μ€μν©λλ€. κ°λ°μλ μν¬νλ‘μ°λ₯Ό κ°μννκ³ , μ€λ¨μ μ΅μννλ©°, κ³ νμ§ μ ν리μΌμ΄μ μ λ λΉ λ₯΄κ² ꡬμΆνκΈ° μν΄ λμμμ΄ λꡬμ κΈ°μ μ μ°Ύκ³ μμ΅λλ€. JavaScript λͺ¨λ ν« λ¦¬νλ μ΄μ€λ¨ΌνΈ(HMR)λ μ΄λ¬ν μꡬ μ¬νμ ν΄κ²°νλ κ°λ ₯ν κΈ°μ λ‘, κ°λ°μκ° μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λν νμ μμ΄ μ€ν μ€μΈ μ ν리μΌμ΄μ μμ λͺ¨λμ μ λ°μ΄νΈν μ μλλ‘ ν©λλ€. μ΄λ κ°λ° κ²½νμ ν¬κ² κ°μ νκ³ , νΌλλ°± 루νλ₯Ό λ λΉ λ₯΄κ² νλ©°, μμ°μ±μ λμ΄λ κ²°κ³Όλ₯Ό κ°μ Έμ΅λλ€.
JavaScript λͺ¨λ ν« λ¦¬νλ μ΄μ€λ¨ΌνΈ(HMR)λ 무μμΈκ°μ?
ν΅μ¬μ μΌλ‘ HMRμ μ 체 μλ‘ κ³ μΉ¨ μμ΄ μ€ν μ€μΈ μ ν리μΌμ΄μ μμ λͺ¨λμ κ΅μ²΄, μΆκ° λλ μ κ±°ν μ μλ κΈ°λ₯μ λλ€. μ¦, μ½λλ₯Ό λ³κ²½νλ©΄ μν₯μ λ°λ λͺ¨λλ§ μ λ°μ΄νΈλμ΄ μ ν리μΌμ΄μ μ μνκ° μ μ§λκ³ μ€μν λ°μ΄ν°κ° μμ€λμ§ μμ΅λλ€. μλμ°¨ μμ§μ΄ μ¬μ ν μλνλ λμ μλμ°¨ μμ§μ κ΅¬μ± μμλ₯Ό μΈκ³Όμ μΌλ‘ κ΅μ²΄νλ κ²κ³Ό λΉμ·νλ€κ³ μκ°νμμμ€.
κΈ°μ‘΄ κ°λ° μν¬νλ‘μ°λ μ’ μ’ λ³κ²½ μ¬νμ μ μ©νκ³ , νμΌμ μ μ₯ν λ€μ λΈλΌμ°μ κ° μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λν λκΉμ§ κΈ°λ€λ¦¬λ κ²μ ν¬ν¨ν©λλ€. μ΄ νλ‘μΈμ€λ νΉν ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ μ κ²½μ° μκ°μ΄ λ§μ΄ 걸릴 μ μμ΅λλ€. HMRμ μ΄λ¬ν μ€λ²ν€λλ₯Ό μ κ±°νμ¬ λ³κ²½ μ¬νμ΄ λΈλΌμ°μ μ κ±°μ μ¦μ λ°μλλλ‘ ν©λλ€.
HMR μ¬μ©μ μ΄μ
- μμ°μ± ν₯μ: HMRμ μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λνλ κ³Όμ μ μμ°μΌλ‘μ¨ λΈλΌμ°μ μμ λ³κ²½ μ¬νμ΄ λνλ λκΉμ§ κΈ°λ€λ¦¬λ μκ°μ ν¬κ² μ€μ λλ€. μ΄λ₯Ό ν΅ν΄ λ λΉ λ₯΄κ² λ°λ³΅νκ³ , λ μμ λ‘κ² μ€ννλ©°, κΆκ·Ήμ μΌλ‘ μ ν리μΌμ΄μ μ λ ν¨μ¨μ μΌλ‘ ꡬμΆν μ μμ΅λλ€.
- μ ν리μΌμ΄μ μν μ μ§: κΈ°μ‘΄ λ€μ λ‘λμ λ¬λ¦¬ HMRμ μ ν리μΌμ΄μ μ μνλ₯Ό μ μ§ν©λλ€. μ΄λ μ¬μ©μ μ λ ₯, μ€ν¬λ‘€ μμΉ λ° κΈ°ν λμ λ°μ΄ν°λ₯Ό μ μ§νλ λ° μ€μνλ©° μνν κ°λ° κ²½νμ μ 곡ν©λλ€. 볡μ‘ν μμμ λλ²κΉ νλ€κ³ μμν΄ λ³΄μΈμ. HMRμ μ¬μ©νλ©΄ μ΄λ―Έ μ λ ₯ν λ°μ΄ν°λ₯Ό μμ§ μκ³ μ ν¨μ± κ²μ¬ λ‘μ§μ μμ ν μ μμ΅λλ€.
- λ λΉ λ₯Έ νΌλλ°± 루ν: HMRμ μ½λ λ³κ²½ μ¬νμ λν μ¦κ°μ μΈ νΌλλ°±μ μ 곡νμ¬ μ€λ₯λ₯Ό μ μνκ² μλ³νκ³ μμ ν μ μλλ‘ ν©λλ€. μ΄ λΉ λ₯Έ νΌλλ°± 루νλ λλ²κΉ λ° μ€νμ λ§€μ° μ€μν©λλ€.
- ν₯μλ λλ²κΉ κ²½ν: HMRμ μ¬μ©νλ©΄ μ ν리μΌμ΄μ μ΄ μ€νλλ λμ μ½λλ₯Ό λ¨κ³λ³λ‘ μ€ννμ¬ λ¬Έμ λ₯Ό λ μ½κ² μλ³νκ³ μ§λ¨ν μ μμ΅λλ€. μ μ§λ μνλ λν λ²κ·Έλ₯Ό λ μ½κ² μ¬ννκ³ μμ ν μ μλλ‘ ν©λλ€.
- ν₯μλ κ°λ°μ κ²½ν: μμ°μ± ν₯μ, μν μ μ§ λ° λ λΉ λ₯Έ νΌλλ°± 루νμ μ‘°ν©μ λ μ¦κ²κ³ ν¨μ¨μ μΈ κ°λ° κ²½νμΌλ‘ μ΄μ΄μ§λλ€. μ΄λ κ°λ°μμ μ¬κΈ°λ₯Ό λμ΄κ³ μ’μ κ°μ μ€μΌ μ μμ΅λλ€.
HMR μλ λ°©μ: λ¨μνλ μ€λͺ
HMRμ κΈ°λ³Έ λ©μ»€λμ¦μλ ν¨κ» μλνλ λͺ κ°μ§ μ£Όμ κ΅¬μ± μμκ° ν¬ν¨λ©λλ€.
- λͺ¨λ λ²λ€λ¬(μ: webpack): λͺ¨λ λ²λ€λ¬λ JavaScript μ½λμ ν΄λΉ μ’ μμ±μ λͺ¨λλ‘ ν¨ν€μ§νλ μν μ ν©λλ€. λν HMRμ νμν μΈνλΌλ₯Ό μ 곡ν©λλ€.
- HMR λ°νμ: HMR λ°νμμ λΈλΌμ°μ μμ μ€νλμ΄ λͺ¨λμ μ€μ κ΅μ²΄λ₯Ό μ²λ¦¬νλ μμ μ½λ μ‘°κ°μ λλ€. λͺ¨λ λ²λ€λ¬μμ μ λ°μ΄νΈλ₯Ό μμ νκ³ μ€ν μ€μΈ μ ν리μΌμ΄μ μ μ μ©ν©λλ€.
- HMR API: HMR APIλ λͺ¨λμ΄ μ λ°μ΄νΈλ₯Ό μλ½νκ³ νμν μ 리 λλ μ¬μ΄κΈ°νλ₯Ό μνν μ μλλ‘ νλ μΌλ ¨μ ν¨μλ₯Ό μ 곡ν©λλ€.
λͺ¨λμ λ³κ²½νλ©΄ λͺ¨λ λ²λ€λ¬κ° λ³κ²½ μ¬νμ κ°μ§νκ³ HMR νλ‘μΈμ€λ₯Ό νΈλ¦¬κ±°ν©λλ€. κ·Έλ° λ€μ λ²λ€λ¬λ λΈλΌμ°μ μ HMR λ°νμμ μ λ°μ΄νΈλ₯Ό 보λ λλ€. λ°νμμ μν₯μ λ°λ λͺ¨λμ μλ³νκ³ μ λ°μ΄νΈλ λ²μ μΌλ‘ κ΅μ²΄ν©λλ€. HMR APIλ λ³κ²½ μ¬νμ΄ μ¬λ°λ₯΄κ² μ μ©λκ³ μ ν리μΌμ΄μ μ΄ μΌκ΄λ μνλ₯Ό μ μ§νλλ‘ νλ λ° μ¬μ©λ©λλ€.
HMR ꡬν: μ€μ© κ°μ΄λ
HMRμ κΈ°λ³Έ λ©μ»€λμ¦μ΄ 볡μ‘ν΄ λ³΄μΌ μ μμ§λ§, νλ‘μ νΈμμ ꡬννλ κ²μ μ’ μ’ λΉκ΅μ κ°λ¨ν©λλ€. κ°μ₯ μΈκΈ° μλ λͺ¨λ λ²λ€λ¬μΈ webpackμ HMRμ νλ₯νκ² μ§μν©λλ€. λ€μν JavaScript νλ μμν¬μμ webpackμ μ¬μ©νμ¬ HMRμ ꡬννλ λ°©λ²μ μ΄ν΄λ³΄κ² μ΅λλ€.
1. webpackμΌλ‘ HMR
Webpackμ μ΅μ JavaScript κ°λ°μμ λͺ¨λ λ²λ€λ§μ μ¬μ€μμ νμ€μ λλ€. μ΄λ μ¦μ κ°λ ₯ν HMR μ§μμ μ 곡ν©λλ€. webpackμΌλ‘ HMRμ νμ±ννλ λ°©λ²μ λν μΌλ°μ μΈ κ°μλ λ€μκ³Ό κ°μ΅λλ€.
- webpack λ° webpack-dev-server μ€μΉ: μμ§ μ€μΉνμ§ μμ κ²½μ° νλ‘μ νΈμμ webpack λ° webpack-dev-serverλ₯Ό κ°λ° μ’ μμ±μΌλ‘ μ€μΉν©λλ€.
- webpack-dev-server ꡬμ±: `webpack.config.js` νμΌμμ `webpack-dev-server`λ₯Ό ꡬμ±νμ¬ HMRμ νμ±νν©λλ€.
- μ ν리μΌμ΄μ μμ HMR νμ±ν: μ£Ό μ ν리μΌμ΄μ νμΌ(μ: `index.js`)μ λ€μ μ½λλ₯Ό μΆκ°νμ¬ HMRμ νμ±νν©λλ€.
- webpack-dev-server μ€ν: `--hot` νλκ·Έλ‘ webpack κ°λ° μλ²λ₯Ό μμν©λλ€.
npm install webpack webpack-cli webpack-dev-server --save-dev
module.exports = {
// ... other configurations
devServer: {
hot: true,
},
};
if (module.hot) {
module.hot.accept();
}
npx webpack serve --hot
μ΄λ¬ν λ¨κ³λ₯Ό μ¬μ©νλ©΄ webpack-dev-serverκ° λ³κ²½ μ¬νμ΄ λ°μν λλ§λ€ μ ν리μΌμ΄μ μ μλμΌλ‘ λ€μ λ‘λν©λλ€. HMRμ΄ μ λλ‘ μλνμ§ μμΌλ©΄ μ 체 μ¬λ‘λλ₯Ό μννμ¬ λ³κ²½ μ¬νμ΄ νμ λ°μλλλ‘ ν©λλ€.
2. Reactλ‘ HMR
Reactλ `react-hot-loader`μ κ°μ λΌμ΄λΈλ¬λ¦¬λ₯Ό ν΅ν΄ HMRμ νλ₯νκ² μ§μν©λλ€. HMRμ React νλ‘μ νΈμ ν΅ν©νλ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
- react-hot-loader μ€μΉ: `react-hot-loader`λ₯Ό κ°λ° μ’ μμ±μΌλ‘ μ€μΉν©λλ€.
- λ£¨νΈ μ»΄ν¬λνΈ λν: μ£Ό μ ν리μΌμ΄μ νμΌ(μ: `index.js` λλ `App.js`)μμ `react-hot-loader`μ `hot`μΌλ‘ λ£¨νΈ μ»΄ν¬λνΈλ₯Ό λνν©λλ€.
- webpack ꡬμ±(νμν κ²½μ°): webpack ꡬμ±μ `react-hot-loader`κ° ν¬ν¨λμ΄ μλμ§ νμΈν©λλ€. μΌλ°μ μΌλ‘ μ΄ μμ μλ `babel-loader` ꡬμ±μ μΆκ°νλ μμ μ΄ ν¬ν¨λ©λλ€.
npm install react-hot-loader --save-dev
import { hot } from 'react-hot-loader/root';
const App = () => {
// Your React component code
};
export default hot(App);
μ΄λ¬ν λ³κ²½ μ¬νμ μ¬μ©νλ©΄ React μ ν리μΌμ΄μ μ΄ μ΄μ HMRμ μ§μν©λλ€. React μ»΄ν¬λνΈλ₯Ό μμ νλ©΄ ν΄λΉ μ»΄ν¬λνΈλ§ μ λ°μ΄νΈλμ΄ μ ν리μΌμ΄μ μ μνκ° μ μ§λ©λλ€.
3. Vue.jsλ‘ HMR
Vue.jsλ 곡μ CLI λ° μμ½μμ€ν μ ν΅ν΄ HMRμ κΈ°λ³Έμ μΌλ‘ μ§μν©λλ€. Vue CLIλ₯Ό μ¬μ©νλ κ²½μ° HMRμ μΌλ°μ μΌλ‘ κΈ°λ³Έμ μΌλ‘ νμ±νλ©λλ€.
- Vue CLI μ¬μ©(κΆμ₯): Vue CLIλ₯Ό μ¬μ©νμ¬ Vue.js νλ‘μ νΈλ₯Ό λ§λλλ€.
- HMR κ΅¬μ± νμΈ(νμν κ²½μ°): Vue CLIλ₯Ό μ¬μ©νμ§ μλ κ²½μ° webpack ꡬμ±μ `vue-loader` νλ¬κ·ΈμΈμ μλμΌλ‘ μΆκ°νμ¬ HMRμ ꡬμ±ν μ μμ΅λλ€.
vue create my-vue-app
Vue CLIλ μλμΌλ‘ HMRμ ꡬμ±ν©λλ€.
Vue CLI λλ μλ ꡬμ±μ μ¬μ©νλ©΄ Vue.js μ ν리μΌμ΄μ μ΄ μλμΌλ‘ HMRμ μ§μν©λλ€.
4. Angularλ‘ HMR
Angularλ HMRμ μ§μνμ§λ§ ꡬνμ΄ μ½κ° λ 볡μ‘ν μ μμ΅λλ€. μΌλ°μ μΌλ‘ `@angularclass/hmr` ν¨ν€μ§λ₯Ό μ¬μ©ν©λλ€.
- @angularclass/hmr μ€μΉ: `@angularclass/hmr` ν¨ν€μ§λ₯Ό μ’ μμ±μΌλ‘ μ€μΉν©λλ€.
- Angular μ ν리μΌμ΄μ ꡬμ±: `@angularclass/hmr`μμ μ 곡νλ μ§μΉ¨μ λ°λΌ HMRμ μ¬μ©νλλ‘ Angular μ ν리μΌμ΄μ μ ꡬμ±ν©λλ€. μΌλ°μ μΌλ‘ `main.ts` νμΌμ μμ νκ³ Angular λͺ¨λμ λͺ κ°μ§ ꡬμ±μ μΆκ°νλ μμ μ΄ ν¬ν¨λ©λλ€.
npm install @angularclass/hmr --save
`@angularclass/hmr` ν¨ν€μ§λ Angularμμ HMR ꡬν νλ‘μΈμ€λ₯Ό μλ΄νλ μμΈν μ§μΉ¨κ³Ό μμ λ₯Ό μ 곡ν©λλ€.
HMR λ¬Έμ ν΄κ²°
HMRμ κ°λ ₯ν λꡬμ΄μ§λ§ μ λλ‘ μ€μ νκ³ κ΅¬μ±νλ κ²μ΄ κΉλ€λ‘μΈ μ μμ΅λλ€. λ€μμ λͺ κ°μ§ μΌλ°μ μΈ λ¬Έμ μ λ¬Έμ ν΄κ²° νμ λλ€.
- μ 체 νμ΄μ§ λ€μ λ‘λ: HMR μ λ°μ΄νΈ λμ μ 체 νμ΄μ§κ° λ€μ λ‘λλλ κ²½μ° webpack ꡬμ±μ λ€μ νμΈνκ³ HMRμ΄ μ¬λ°λ₯΄κ² νμ±νλμλμ§ νμΈν©λλ€.
- λͺ¨λμ μ°Ύμ μ μμ μ€λ₯: λͺ¨λμ μ°Ύμ μ μμ μ€λ₯κ° λ°μνλ κ²½μ° λͺ¨λ κ²½λ‘κ° μ¬λ°λ₯Έμ§, νμν λͺ¨λ μ’ μμ±μ΄ μ€μΉλμ΄ μλμ§ νμΈν©λλ€.
- μν μμ€: HMR μ λ°μ΄νΈ μ€μ μ ν리μΌμ΄μ μνκ° μμ€λλ κ²½μ° λͺ¨λμ΄ μ λ°μ΄νΈλ₯Ό μ λλ‘ μλ½νκ³ νμν μ 리 λλ μ¬μ΄κΈ°νλ₯Ό μννλμ§ νμΈν©λλ€.
- μΆ©λνλ μ’ μμ±: μλ‘ λ€λ₯Έ μ’ μμ± κ°μ μΆ©λμ΄ λ°μνλ κ²½μ° npm λλ yarnκ³Ό κ°μ ν¨ν€μ§ κ΄λ¦¬μλ₯Ό μ¬μ©νμ¬ μΆ©λμ ν΄κ²°ν©λλ€.
- λΈλΌμ°μ νΈνμ±: λμ λΈλΌμ°μ κ° HMRμ νμν κΈ°λ₯μ μ§μνλμ§ νμΈν©λλ€. μ΅μ λΈλΌμ°μ λ μΌλ°μ μΌλ‘ νλ₯ν μ§μμ μ 곡ν©λλ€.
HMR μ¬μ©μ λν λͺ¨λ² μ¬λ‘
HMRμ μ΄μ μ κ·Ήλννκ³ μ μ¬μ μΈ λ¬Έμ λ₯Ό λ°©μ§νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.
- λͺ¨λμ μκ³ μ§μ€μ μΌλ‘ μ μ§: μμ λͺ¨λμ μ λ°μ΄νΈ λ° μ μ§ κ΄λ¦¬κ° λ μ½μ΅λλ€.
- μΌκ΄λ λͺ¨λ ꡬ쑰 μ¬μ©: μ μ μλ λͺ¨λ ꡬ쑰λ₯Ό μ¬μ©νλ©΄ μ½λλ₯Ό μ΄ν΄νκ³ μ μ§ κ΄λ¦¬νκΈ°κ° λ μ¬μμ§λλ€.
- μν μ λ°μ΄νΈλ₯Ό μ μ€νκ² μ²λ¦¬: HMR μ€μ λͺ¨λμ΄ μν μ λ°μ΄νΈλ₯Ό μ λλ‘ μ²λ¦¬νμ¬ λ°μ΄ν° μμ€μ λ°©μ§νλμ§ νμΈν©λλ€.
- HMR κ΅¬μ± ν μ€νΈ: HMR ꡬμ±μ΄ μ¬λ°λ₯΄κ² μλνλμ§ νμΈνκΈ° μν΄ μ κΈ°μ μΌλ‘ ν μ€νΈν©λλ€.
- κ°λ ₯ν λͺ¨λ λ²λ€λ¬ μ¬μ©: webpackκ³Ό κ°μ΄ HMRμ νλ₯νκ² μ§μνλ λͺ¨λ λ²λ€λ¬λ₯Ό μ νν©λλ€.
κ³ κΈ HMR κΈ°μ
HMRμ κΈ°λ³Έ μ¬νμ μ΅μν΄μ§λ©΄ κ°λ° μν¬νλ‘μ°λ₯Ό λμ± κ°μ νκΈ° μν΄ λͺ κ°μ§ κ³ κΈ κΈ°μ μ νμν μ μμ΅λλ€.
- CSSμ HMR: HMRμ μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λνμ§ μκ³ CSS μ€νμΌμ μ λ°μ΄νΈνλ λ°μλ μ¬μ©ν μ μμ΅λλ€. μ΄λ μ€μκ°μΌλ‘ μ»΄ν¬λνΈμ μ€νμΌμ μ§μ νλ λ° νΉν μ μ©ν μ μμ΅λλ€. λ§μ CSS-in-JS λΌμ΄λΈλ¬λ¦¬λ HMRκ³Ό μννκ² ν΅ν©λλλ‘ μ€κ³λμμ΅λλ€.
- μλ² μΈ‘ λ λλ§κ³Ό HMR: HMRμ μλ² μΈ‘ λ λλ§κ³Ό ν¨κ» μ¬μ©νμ¬ λ λΉ λ₯΄κ³ λ°μμ±μ΄ λ°μ΄λ κ°λ° κ²½νμ μ 곡ν μ μμ΅λλ€.
- μ¬μ©μ μ μ HMR ꡬν: 볡μ‘νκ±°λ λ§€μ° νΉνλ μ ν리μΌμ΄μ μ κ²½μ° μ¬μ©μ μ μ HMR ꡬνμ λ§λ€μ΄ νΉμ μꡬ μ¬νμ λ§κ² HMR νλ‘μΈμ€λ₯Ό μ‘°μ ν μ μμ΅λλ€. μ΄ κ²½μ° HMR API λ° λͺ¨λ λ²λ€λ¬μ λν λ κΉμ μ΄ν΄κ° νμν©λλ€.
λ€μν κ°λ° νκ²½μμμ HMR
HMRμ λ‘컬 κ°λ° νκ²½μλ§ κ΅νλμ§ μμ΅λλ€. μ€ν μ΄μ§ λ° νλ‘λμ νκ²½μμλ μ¬μ©ν μ μμ§λ§ νΉμ κ³ λ € μ¬νμ΄ μμ΅λλ€. μλ₯Ό λ€μ΄ μ μ¬μ μΈ μ±λ₯ λ¬Έμ λλ 보μ μ·¨μ½μ±μ λ°©μ§νκΈ° μν΄ νλ‘λμ μμ HMRμ λΉνμ±νν μ μμ΅λλ€. κΈ°λ₯ νλκ·Έλ νκ²½ λ³μλ₯Ό κΈ°λ°μΌλ‘ HMR κΈ°λ₯μ μ μ΄ν μ μμ΅λλ€.
μ ν리μΌμ΄μ μ λ€μν νκ²½(κ°λ°, μ€ν μ΄μ§, νλ‘λμ )μ λ°°ν¬ν λ κ° νκ²½μ λ§κ² HMRμ΄ μ μ νκ² κ΅¬μ±λμλμ§ νμΈν©λλ€. μ¬κΈ°μλ μλ‘ λ€λ₯Έ webpack κ΅¬μ± λλ νκ²½ λ³μλ₯Ό μ¬μ©νλ κ²μ΄ ν¬ν¨λ μ μμ΅λλ€.
HMRμ λ―Έλ
HMRμ μ±μν κΈ°μ μ΄μ§λ§ κ³μ μ§ννκ³ μμ΅λλ€. λͺ¨λ λ²λ€λ¬ λ° HMR λΌμ΄λΈλ¬λ¦¬μ μλ‘μ΄ κΈ°λ₯κ³Ό κ°μ μ¬νμ΄ μ§μμ μΌλ‘ μΆκ°λκ³ μμ΅λλ€. μΉ κ°λ°μ΄ μ μ λ 볡μ‘ν΄μ§μ λ°λΌ HMRμ κ°λ° μν¬νλ‘μ°λ₯Ό κ°μννκ³ κ°λ°μ μμ°μ±μ ν₯μνλ λ° λμ± μ€μν μν μ ν κ²μ λλ€.
μλ‘μ΄ JavaScript νλ μμν¬μ λꡬμ λΆμμ HMRμμ λ λ§μ νμ μ κ°μ Έμ¬ κ²μ λλ€. μμΌλ‘ λ μνν ν΅ν©κ³Ό κ³ κΈ κΈ°λ₯μ κΈ°λνμμμ€.
κ²°λ‘
JavaScript λͺ¨λ ν« λ¦¬νλ μ΄μ€λ¨ΌνΈλ κ°λ° μν¬νλ‘μ°λ₯Ό ν¬κ² κ°μ νκ³ , μμ°μ±μ λμ΄λ©°, μ λ°μ μΈ κ°λ° κ²½νμ ν₯μμν¬ μ μλ κ°λ ₯ν κΈ°μ μ λλ€. HMRμ μ 체 νμ΄μ§λ₯Ό λ€μ λ‘λνλ κ³Όμ μ μμ κ³ , μ ν리μΌμ΄μ μνλ₯Ό μ μ§νλ©°, λ λΉ λ₯Έ νΌλλ°± 루νλ₯Ό μ 곡νμ¬ λ λΉ λ₯΄κ² λ°λ³΅νκ³ , λ μμ λ‘κ² μ€ννλ©°, κ³ νμ§ μ ν리μΌμ΄μ μ λ ν¨μ¨μ μΌλ‘ ꡬμΆν μ μλλ‘ ν©λλ€. React, Vue.js, Angular λλ κΈ°ν JavaScript νλ μμν¬λ₯Ό μ¬μ©νλ HMRμ λ ν¨κ³Όμ μ΄κ³ ν¨μ¨μ μΈ κ°λ°μκ° λλ λ° λμμ΄ λλ κ·μ€ν λꡬμ λλ€. HMRμ μμ©νκ³ μΉ κ°λ° λ Έλ ₯μμ μλ‘μ΄ μμ€μ μμ°μ±μ ν보νμμμ€. νΉμ νλ‘μ νΈ μꡬ μ¬νμ κ°μ₯ μ ν©ν HMR μ€μ μ μ°ΎκΈ° μν΄ λ€μν ꡬμ±κ³Ό λΌμ΄λΈλ¬λ¦¬λ₯Ό μ€νν΄ λ³΄μμμ€.